{extend name="index/default/common/base"/}
{block name="style"}{/block}
{block name="meta"}
<link rel="mobile-prefetch" href="/mobile/index"/>
{/block}
{block name="title"}
<title>{$seo.title}</title>
{/block}
{block name="keywords"}
<meta name="keywords" content="{$seo.keywords}"/>
<meta name="description" content="{$seo.desc}"/>
{/block}

<!-- 主体 -->
{block name="body"}
{include file="index/default/common/header" nav='index' /}
<div class="blog-map">
    您的当前位置：<a href="{$index_url}">首页</a><span>&gt;</span>文章归档
</div>
<div class="blog-content clearfix">
    <div class="blog-calendar">
        <div id="archiveCalendar" style="width: 100%; height:240px"></div>
    </div>
    <div class="blog-archives">
        <div class="blog-analysis">
            博客统计：<span>{$cate_count}</span>个分类<span>{$tag_count}</span>个标签<span>{$article_count}</span>篇文章
        </div>
        <div class="blog-archives-list">
            {volist name="$year_archives" id="vo"}
            <div class="blog-archives-year"><h3>{$key} 年</h3></div>
            {volist name="$vo" id="voo" key="kk"}
            <div class="blog-archives-month">
                <span class="mon">{$key}月 <span class="mon-num">{$voo.count} 篇</span></span>
            </div>
            <ul class="blog-archives-ul">
                {volist name="$voo.list" id="vooo"}
                <li>{$vooo.create_date}日 <a href="/blog/article/id/{$vooo.id}">{$vooo.title}</a>
                    ({$vooo.read})
                </li>
                {/volist}
            </ul>
            {/volist}
            {/volist}
        </div>
    </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script>
  var archiveCalendar = {$date_archives | raw
  }
  ;

  function getRange() {
    let today = new Date();
    let tYear = today.getFullYear();
    let tMonth = today.getMonth() + 1;
    let tDate = today.getDate();
    let dateFirst = tYear + "-" + tMonth + "-" + tDate;
    let datelast = (tYear - 1) + "-" + tMonth + "-" + tDate;
    let dataRange = [];
    dataRange.push(dateFirst);
    dataRange.push(datelast);
    return dataRange;
  }

  function getDay() {
    var today = new Date();
    var dayArray = [];
    for (var i = 0; i < 366; i++) {
      var targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * i;
      var date = new Date(targetday_milliseconds);
      dayArray.push(retunDay(date));
    }
    return dayArray;
  }

  function retunDay(day) {
    var tYear = day.getFullYear();
    var tMonth = day.getMonth();
    var tDate = day.getDate();
    tMonth = tMonth + 1;
    if (tMonth.toString().length == 1) {
      tMonth = "0" + tMonth;
    }
    if (tDate.toString().length == 1) {
      tDate = "0" + tDate;
    }
    var dateStr = tYear + "-" + tMonth + "-" + tDate;
    var dateArray = [];
    dateArray.push(dateStr);
    if (archiveCalendar[dateStr]) {
      dateArray.push(archiveCalendar[dateStr]);
    } else {
      dateArray.push(0);
    }
    return dateArray;
  }

  let myChart = echarts.init(document.getElementById('archiveCalendar'));
  let option = {
    title: {
      top: 0,
      text: '博客近一年的文章日历',
      left: 'center',
      textStyle: {
        fontSize: '20',
        color: '#333',
      }
    },
    tooltip: {
      padding: 6,
      formatter: function (obj) {
        var value = obj.value;
        return '<div style="font-size: 12px;">' + value[1] + ' 篇文章：' + value[0] + '</div>';
      }
    },
    visualMap: {
      min: 0,
      max: 3,
      show: false,
      inRange: {
        color: ['#fafafa', '#1AAD19']
      }
    },
    calendar: {
      top: 68,
      left: 40,
      right: 15,
      range: getRange(),
      cellSize: ['auto', 22],
      splitLine: {
        lineStyle: {
          color: '#aaa',
          type: 'dashed'
        }
      },
      itemStyle: {
        borderWidth: 0.5
      },
      yearLabel: {show: false},
      monthLabel: {
        nameMap: 'cn',
        fontSize: 12
      },
      dayLabel: {
        show: true,
        formatter: '{start}  1st',
        fontWeight: 'lighter',
        nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        fontSize: 12
      }
    },
    series: [{
      type: 'heatmap',
      coordinateSystem: 'calendar',
      calendarIndex: 0,
      data: getDay()
    }]
  };
  myChart.setOption(option);
</script>
{/block}
<!-- /脚本 -->
